// src/components/Message/index.ts  
import { createApp } from 'vue'
import MessageComponent from './main.vue'
 
const instances = []
let seed = 1 
 
const Message = (options) => {
  const container = document.createElement('div') 
  const id = `message-${seed++}`
  container.id  = id
  // 计算新的提示框位置
  const position = 20 + instances.length * 60; // 每个提示框之间的间距为60px
  const app = createApp(MessageComponent, {
    ...options,
    _uid: id,
    position: position
  })
 
  const instance = app.mount(container) 
  document.body.appendChild(container) 
  instances.push(instance) 
 
  // 自动移除实例 
  setTimeout(() => {
    const index = instances.length - 1
    if (index > -1) {
      instances.splice(index,  1)
      // 更新剩余实例的位置
      instances.forEach((inst, i) => {
        inst.localPosition = 20 + i * 60; // 更新位置
      });
    }
  }, options.duration  || 3000)
}
 
// 注册快捷方法 
(['success', 'warning', 'error', 'info']).forEach(type => {
  Message[type] = (message, duration) => {
    Message({ type, message, duration })
  }
})
 
export default Message 